$def with (form, text,tap_endpoints_form)



<!doctype html>



<html>



    <head>

        <title>TAP Interface with webpy/ajax</title>

        <link rel="stylesheet" type="text/css" href="/static/style.css" />

        <script type="text/javascript" src="/static/js/jquery.js"></script>

        <script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script> 

        <script type="text/javascript" src="static/js/functions.js"></script>

        <script type="text/javascript">

		    function validateForm() {

		        var x=document.forms["email_form"]["email"].value

		        var atpos=x.indexOf("@");

		        var dotpos=x.lastIndexOf(".");

		        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {

		            return false;

		        } else {

		        	return true;

		        }

	        }

		    

	        jQuery(document).ready(function() {

	

	           	jQuery("#votable").tablesorter();		

	            jQuery('form').find("input[type='submit']").removeAttr('disabled');

	            var xhr;

	        	jQuery('.form').each(function() {

	                    jQuery(this).submit(function(){

		            	    var submitButton = jQuery(this).find("input[type='submit']");

		            		var input_string = $$("textarea#textfield").val();

		            		var selected_endpoint = jQuery("#tap_endpoint").val();

		            		if (selected_endpoint==''){

		            			alert("Please select from the list of TAP endpoints!");			            		

		            		} else if (input_string!=''){

			                    jQuery(submitButton).attr("disabled", "true");

			                    jQuery('#results').fadeOut('fast');

			                    jQuery('#load').fadeIn('normal');

			                    jQuery('#loading_options').fadeIn('normal');

			                    

			    				xhr= jQuery.ajax({

			                            type: "POST",

			                            data: {textfield : input_string,generated_tap : selected_endpoint},

			                            timeout: 1000000,

			                            error: function() {

			                               jQuery('form').find("input[type='submit']").removeAttr('disabled');

			                               jQuery('#loading_options').hide();

			                               jQuery('#load').hide();

			                            },

			                            success: function(data) {

				                            jQuery('#results').html(data).hide().fadeIn(1500);

				                            jQuery('#loading_options').hide();

				                            jQuery('#load').hide();

				                            jQuery('form').find("input[type='submit']").removeAttr('disabled');

				                           	jQuery("#votable").tablesorter();		

			           					}

			                    });

	            			} else {

	            				alert('Please enter a query');

	            			}

	                   	    return false;

	            		

	                     });

	        	});

	          

	       		jQuery(".myButtonStop").click(function() {

	                jQuery('.form').find("input[type='submit']").removeAttr('disabled');

	                jQuery('#load').fadeOut('fast');

	                jQuery('#loading_options').fadeOut('normal');

	                xhr.abort();

	                return false;

	       		});

	            

       		 	jQuery(".myButtonEmail").click(function() {

	        	    xhr.abort();

	        		jQuery('.form').find("input[type='submit']").attr("disabled", "true");

	                jQuery('#load').fadeOut('fast');

	                jQuery('#loading_options').fadeOut('normal');

	                jQuery('#send_email').slideDown();

	                return false;

	        	});

	            

	        	jQuery(".email_cancel").click(function() {

	        	    jQuery('#send_email').slideUp();

	                jQuery('form').find("input[type='submit']").removeAttr('disabled');

	        	    return false;

	       		});

	        	

	        	jQuery('.email_form').submit(function() {

	            	var input_query = jQuery('.form').find("input#textfield").val();

	        		var input_email = $$("input#email").val();

            		var tap_endpoint = jQuery('#tap_endpoint').val();

            		if (tap_endpoint==''){

            			alert("Please select from the list of TAP endpoints!");			            		

            		} else if (input_query==''){

	        			alert('Please enter a query');

	        		} else if (validateForm()){

	                    jQuery('form').find("input[type='submit']").removeAttr('disabled');

		        		jQuery('#send_email').slideUp();

		    

		        		jQuery.ajax({

	                        type: "POST",

	                        url: "send_email",

	                        data: {email : input_email,query : input_query,generated_tap : tap_endpoint},

	                        timeout: 1000000,

	                        error: function() {

	                        	jQuery('#email_message').html('There was an error processing you request');

	                        	jQuery('#email_message').fadeIn('normal');

	    	                   	jQuery('#email_message').fadeOut(2500);

	                        	

	                        },

	                        success: function(data) {

	                        	jQuery('#email_message').html('An email with your results will arrive shortly');

	                        	jQuery('#email_message').fadeIn('normal');

	    	                   	jQuery('#email_message').fadeOut(2500);



	            	        },

	                    });

	        		} else {

	        			alert('Please enter a valid email');

	        		}

	               	return false;	        	

	       		 });

	            

	

	      	  jQuery(".metadata_cancel").click(function() {

	           		jQuery("#metadata").slideToggle();

					jQuery('#load').hide();

					jQuery('#tables').html("");

	          });    

	        

	       	  jQuery(".toggle_metadata").click(function() {

            		var display = jQuery('#metadata').css('display');

            		var tap_endpoint = jQuery('#tap_endpoint').val();

            		if (tap_endpoint==''){

            			alert("Please select from the list of TAP endpoints!");			            		

           			} else if (display=='none'){

						jQuery('#load').hide();

	                    jQuery('#load').fadeIn('normal');

					    jQuery("#metadata").slideToggle();

		       			jQuery.ajax({

	                            type: "POST",

	                            data: {display : 'yes',generated_tap : tap_endpoint},

	                            timeout: 1000000,

	                            error: function() {

	        	                    jQuery('#load').hide();	                           

	                            },

	                            success: function(data) {

									jQuery('#tables').html(data).hide().fadeIn('fast');

									jQuery(".content").hide();

									jQuery(".column_content").hide();

									jQuery('#load').hide();

	                            }

	                    });

					} else {

						jQuery('#tables').html("");

						jQuery('#load').hide();

					    jQuery("#metadata").slideToggle();



					}

												

	       	  });       

					

	          jQuery('.heading').live('click',function(){ 

		      		//jQuery(".heading").click(function() {

					jQuery(this).next().next().slideToggle(500);

	   	      });

		      		

	          jQuery('.column_heading').live('click',function(){ 

		      		//jQuery(".heading").click(function() {

					jQuery(this).next().slideToggle(500);

	   	      });

		      		

       		  jQuery("#toggle_endpoints").click(function() {

					jQuery("#endpoints_form").slideToggle(500);

       		  });

		      	

       		  jQuery('.endpoints_form').submit(function() {

	       		var selected_endpoints = "";

	       		jQuery('#endpoints_form input:checked').each(function() {

	       			selected_endpoints+= " " + (jQuery(this).attr('name'));

	       		});

       			if (selected_endpoints==""){

        			alert('Please select from the list of TAP endpoints');

        		} else {

               		jQuery.ajax({

	               		traditional: true,

                        type: "POST",

                        dataType: "text",

                        data: {tap_endpoints : selected_endpoints},

                        timeout: 1000000,

                        error: function() {

                     		alert('There was an error executing your request. Please try again');

                        },

                        success: function(data) {

        					jQuery("#endpoints_form").slideToggle(500);

        					jQuery("#tap_endpoint").val(data);     

            	        },

                    });

        		}

               	return false;

       		  });

       		  

      	  });

	          

	          

	          

        </script>

        

        

        

        <link rel="icon" 

      	            type="image/png" 

                              href="static/icon2.png">

                              



	<!--[if lte IE 6]>

			<style type="text/css" media="screen">

				#header div{

					background-image: none;

					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');

				}

			</style>

	<![endif]-->

    </head>

    

    <body>

	

	<div id="container">

	<div id="header">

				<!-- Div is for Shadow Overlay	-->

				<div>

					<h1>TAP / ADQL query portal 1.0</h1>	

				</div>

	</div>

	

	<div id="gradient"></div>

	<br>

    <div id="toggle_metadata" class="toggle_metadata"></div>

	

	<div id="main">

	<div id="searchbar">	



	        <form class="form" method="post" name='form'> 

	        	$:form.render()

		        <input class="button" type="submit" value="Send"/>

	        	

	        </form>

	        <div id="toggle_endpoints">

	        	<a>Toggle Endpoint selection</a>

	        </div>

	</div>

	<div id="endpoints_form">

		<p>Please select from the list of TAP endpoints:</p>

	    <form class="endpoints_form" method="post" name='endpoints_form'> 

	    	<div id="overflow">

			$:tap_endpoints_form.render()

			</div>

		    <input type="submit" class="submit" value="Select"/>

		</form>	

	</div>

	<br>

	<div id="load"> </div>

	<div id="loading_options">

		

		<a href="#" class="myButtonStop">Stop query</a>

		<a href="#" class="myButtonEmail">Send via email</a>

	</div>

    

    <br><br>

    

    <div id="email_message"></div>

    

    <div id="send_email">

   		 <form class="email_form" method="post" name='email_form'>

   		 	<p>Please enter your email:<a class="email_cancel" href=''>x</a></p>

   		 	<input type="text" name="email" id="email" /> 	

 		 	<input type="submit" value="Submit" class='email_submit'/>

   		 	<div class="spacer"></div>

   		 </form>

    </div>

    

    <div id="metadata">

    <span class="metadata_cancel">[ <a>Hide</a> ]</span> 

	    <h3>Available Tables</h3> 

	    <p style="font-size:12px;font-style:italic">Click on a table to reveal the metadata</p>

	    <br><br>

	    <div style="height:1px;background:#EC9E9E;width:95%;margin:0 auto;"></div>

	    <br>

	    <div id="tables"></div> 

    </div>

    

	<div id="results">$text</div>

    <br><br>

    </div>   

	

    <div id="footer">

    <a href="">About</a> | 

    <a href="">Help</a> | 

    Version 1.0

    </div>  

   

   </div>

   

    </body>



</html>
